<template>
    <div class="share-options">
      <div class="button-container">
        <button class="style-button" @click="shareToSocial">分享</button>
        <button class="style-button" @click="copyText">复制文本</button>
        <button class="style-button" @click="generateImage">生成图片</button>
        <button class="style-button" @click="copyLink">复制链接</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from 'vue';
  
  const props = defineProps({
    message: {
      type: Object,
      required: true
    }
  });
  
  const emit = defineEmits(['close']);
  
  const shareToSocial = async () => {
    // 使用 Web Share API 进行分享（如果浏览器支持）
    if (navigator.share) {
      try {
        await navigator.share({
          title: '奇谱AI助手',
          text: props.message.qipu,
          url: window.location.href
        });
        alert('分享成功');
      } catch (err) {
        console.error('分享失败:', err);
      }
    } else {
      alert('您的浏览器不支持分享功能');
    }
    emit('close');
  };
  
  const copyText = () => {
    navigator.clipboard.writeText(props.message.qipu)
      .then(() => {
        alert('文本已复制');
      })
      .catch(err => {
        console.error('复制失败:', err);
        alert('复制失败');
      });
    emit('close');
  };
  
  const generateImage = () => {
    // 处理生成图片的逻辑
    emit('close');
  };
  
  const copyLink = () => {
    const shareLink = `${window.location.origin}/say_say?share=${encodeURIComponent(JSON.stringify(props.message))}`;
    navigator.clipboard.writeText(shareLink)
      .then(() => {
        alert('链接已复制');
      })
      .catch(err => {
        console.error('复制失败:', err);
        alert('复制失败');
      });
    emit('close');
  };
  </script>
  
  <style scoped>
  .share-options {
    padding: 20px;
  }
  
  .button-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
  }
  
  .style-button {
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .style-button:hover {
    background-color: #f5f7fa;
    border-color: #409eff;
    color: #409eff;
  }
  </style>